<template>
	<view class="p30">
		<view class="chargeBond">充值劵</view>
		<view class=" mb30 plr24 border-r1 bf shadow" style="padding-top: 20upx;">


			<view class="" style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
				<view v-for="item in chargeArr" :key="item.id" style="width: 33%;">
					<view class="flex_a h90 mb20 ft26" @click="chargeBond(item)">
						<view class="flex_aj  ph100 mr24 border-r1"
							style="display: flex;flex-wrap: wrap;justify-content: center;flex-direction: column;align-items: center;min-width: 170upx;"
							:class="bondId == item.id ? 'bd-primary primary' : 'bd'">
							<text style="font-size: 38upx;color:green">{{ item.discount }}元</text> <text
								style="font-size: 18upx;">充值满{{item.useCondition}}元可送</text>
						</view>
					</view>
				</view>

				<view class="h60 c9 tac" v-if="chargeArr.length == 0">暂无充值劵</view>
			</view>
		</view>
		<!-- 充值活动赠送优惠券-->
		<view class="h100 lh100 ft30">充值活动赠送优惠券</view>
		<view class=" mb30 plr24 border-r1 bf shadow" style="padding-top: 20upx;">
			<view class="" style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
				<view v-for="item,index in cashArr" :key="index" style="width: 33%;">
					<view class="flex_a h110 mb20 ft26" @click="cashBond(item,index)">
						<view class="flex_aj  ph100 mr24 border-r1"
							style="display: flex;flex-wrap: wrap;justify-content: center;flex-direction: column;align-items: center;min-width: 150upx;padding-left: 10upx;padding-right: 10upx;"
							:class="cashId == index ? 'bd-primary primary' : 'bd'">
							<text
								style="font-size: 26upx;color:green">充{{ item.payCondition }}元送{{item.giveAmount}}元</text>
						</view>
					</view>
				</view>
				<view class="h60 c9 tac" v-if="cashArr.length == 0">暂无充值活动赠送优惠券</view>
			</view>
		</view>
		<!-- 充值活动赠送余额-->
		<view class="h100 lh100 ft30">充值活动赠送余额</view>
		<view class=" mb30 plr24 border-r1 bf shadow" style="padding-top: 20upx;">
			<view class="" style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
				<view v-for="item,index in cashArrs" :key="index" style="width: 33%;">
					<view class="flex_a h110 mb20 ft26" @click="cashBonds(item,index)">
						<view class="flex_aj  ph100 mr24 border-r1"
							style="display: flex;flex-wrap: wrap;justify-content: center;flex-direction: column;align-items: center;min-width: 150upx;padding-left: 10upx;padding-right: 10upx;"
							:class="cashIds == index ? 'bd-primary primary' : 'bd'">
							<text style="font-size: 26upx;color:green">充{{ item.inMoney }}元送{{item.outMoney}}元</text>
						</view>
					</view>
				</view>
				<view class="h60 c9 tac" v-if="cashArrs.length == 0">暂无充值活动赠送余额</view>
			</view>
		</view>
		<!-- 自定义充值 -->
		<view class="h100 lh100 ft30">自定义充值金额</view>
		<view class="flex_a h100 plr24 bf bd border-r1">
			<input type="number" class="flex1" min="1" maxlength="8" v-model="money" @change="moneyChange"
				placeholder="自定义充值金额" placeholder-class="c9" />
		</view>
		<view class="mb100 h80 lh80 c6">当前可用余额： {{balance.toFixed(2)}} 元</view>
		<!-- <view class="mb10 plr30">
			<checkbox-group @change="checkedChange">
				<label>
					<checkbox value="cb" :checked="false" />请确认：
					充值站点：{{newAddress}} -- 充值金额： {{money}} 元
				</label>
			</checkbox-group>
		</view> -->
		<view class="plr30 mb30">


			<u-button type="primary" shape="circle" @click="recharge">立即充值</u-button>
		</view>
		<!-- <view class="flex_aj h60 mb40">
			<text class="c9">点击立即充值即表示您已阅读并同意</text>
			<navigator url="/pages/user/service/detail?type=3" hover-class="none" class="primary">《充值协议》</navigator>
		</view> -->
		<!-- 充值协议 -->
		<u-popup v-model="showPhone" mode="left" border-radius="14" :closeable="true" width="100%" height="100%">
			<view class=" plr30 pb30">
				<!-- <view
					style="text-align: center;color: black;margin-top: 8%;font-weight: 700;font-size: 30upx;margin-bottom: 5%;">
					充值协议
				</view> -->
				<view style="text-align: left;margin-bottom: 5%;margin-top: 12%;overflow-y: scroll;">
					<u-parse :html="signContent"></u-parse>
				</view>
				<view class="flex_aj h60 mb40">
					<u-radio-group v-model="buyValue" @change="radioGroupChange">
						<u-radio :disabled="isdisabled" @change="radioChange" v-for="(item, index) in signList"
							:key="index" :name="item.name">
							<text class="c9">{{item.name}}</text>
							<text class="primary">《充值协议》</text>
						</u-radio>
					</u-radio-group>
				</view>
				<view style="margin-bottom: 60upx;">
					<u-button :disabled="isdisabled" type="primary" @click="signFn">
						<span v-if="isdisabled">{{counts}}秒后可</span>签署
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		protocol
	} from '@/api/public.js'
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		mealList,
		recharge,
		couponGetUserCoupon,
		getPayList,
		settingTopUpList
	} from '@/api/user.js'
	export default {
		name: 'recharge',
		data() {
			return {
				isdisabled: true,
				counts: 3,
				timer: null,
				showPhone: false,
				buyValue: '我已阅读并同意', //单选框值
				isRadio: false, //是否勾选并同意协议
				signList: [{ //单选框数组
					name: '我已阅读并同意'
				}],
				signContent: '',
				rangess: {},
				list: [],
				mealId: 1,
				money: '',
				nameArr: [],
				bigArr: [],
				smailArr: [],
				idArr: [],
				apiSettingTopupEntityList: [],
				apiSettingTopupEntityListArr: [],
				agentId: '',
				agentIdss: '',
				tabIndex: 0,
				tabLiIndex: 0,
				balance: 0,
				checked: false,
				aa: '',
				isTrue: false,
				newId: '',
				addressArr: [],
				newList: [],
				id: 0,
				value: 0,
				ranges: [],
				range: [],
				newAddress: '',
				isNewId: false,
				bondId: '', // 选中的优惠券id
				bondMoney: '', // 选中的优惠券满多少元可用
				chargeArr: [],
				cashId: null,
				cashIds: null,
				cashArr: [
					// {
					// 	"payCondition": 100.01, //充值条件
					// 	"giveAmount": 100.01 //满足条件之后赠送的金额
					// },
					// {
					// 	"payCondition": 200.01, //充值条件
					// 	"giveAmount": 100.01 //满足条件之后赠送的金额
					// },
					// {
					// 	"payCondition": 300.01, //充值条件
					// 	"giveAmount": 100.01 //满足条件之后赠送的金额
					// },
					// {
					// 	"payCondition": 4, //充值条件
					// 	"giveAmount": 10 //满足条件之后赠送的金额
					// },
					// {
					// 	"payCondition": 5, //充值条件
					// 	"giveAmount": 10 //满足条件之后赠送的金额
					// },
				],
				cashArrs: [],
			}
		},

		onLoad(e) {

			this.balance = 0
			this.userInfo.wallet.forEach((item) => {
				this.balance += item.balance
				this.agentId = item.agentId
			})

		},

		async onShow() {
			this.agentId = wx.getStorageSync('oneData').agentId || ''
			this.agentIdss = wx.getStorageSync('oneData').agentId || ''
			this.cashFn()
			this.settingTopUpList()
		},
		async mounted() {
			// 拿到用户领取的充值劵
			const ress = await couponGetUserCoupon({
				couponType: '0',
				agentId: wx.getStorageSync('oneData').agentId || ''
			})
			this.chargeArr = ress.data || []
			console.log('666666666', this.chargeArr);
		},
		watch: {

			tabIndex: {
				handler(newVal, oldVal) {
					console.log('====', newVal, oldVal);
					if (newVal !== oldVal) {
						this.money = '',
							this.mealId = ''

					}
				},
				deep: true
			},
			newId: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.isNewId = true
					} else {
						this.isNewId = false
					}
					if (newVal && newVal !== oldVal) {
						this.range = [] // 清零
						this.range = this.ranges //恢复原来从后端拿的数据
						// console.log('11111', newVal, oldVal, this.id);
						let data = this.range.filter(function(item) {
							return item.agentId == newVal;
						})
						this.range = data
						console.log('0000000', this.range);

						this.range.forEach((item) => {
							if (this.value == item.value) {
								this.isTrue = true
							}
						})
						console.log('111111110000000', this.isTrue, this.range);

					}
				},
				deep: true
			},
			showPhone: {
				handler(newVal, oldVal) {
					// console.log('====', newVal, oldVal);
					// 如果是打开关闭
					if (!newVal && oldVal) {
						clearInterval(this.timer)
						this.timer = null
						// this.buyValue = ''
						setTimeout(() => {
							this.isdisabled = true
							this.counts = 3
						}, 1000)
					}
				},
				deep: true
			},

		},

		computed: {
			userInfo() {
				return this.$store.state.user.userInfo || {}
			},
			...mapState({
				longitudess: state => state.user.longitudess,
				latitudess: state => state.user.latitudess,
				// agentIdss: state => state.user.agentIdss,
			})
		},
		methods: {
			// 拿到用户充值赠送余额活动列表
			async settingTopUpList() {
				const res = await settingTopUpList()
				this.cashArrs = res.data || []
				console.log('拿到用户充值赠送余额活动列表', res.data);
			},
			// 选择充值赠送余额活动
			cashBonds(item, index) {
				// this.cashContent = '你确定要使用现金劵--' + item.discount + '元？'
				// this.cashShow = true;
				console.log('2344222', item, index);
				this.money = item.inMoney
				this.cashIds = index
			},
			// 拿到用户充值赠送优惠券活动列表
			async cashFn() {
				const res = await getPayList({
					agentId: this.agentId
				})
				this.cashArr = res.data || []
				console.log('拿到用户充值赠送优惠券活动列表', this.cashArr);
			},
			// 选择充值赠送优惠券活动
			cashBond(item, index) {
				// this.cashContent = '你确定要使用现金劵--' + item.discount + '元？'
				// this.cashShow = true;
				console.log('2344222', item, index);
				this.money = item.payCondition
				this.cashId = index
			},
			change(e) {
				this.money = e
				this.value = e
				console.log("e:", e, this.value);
			},

			checkedChange(e) {
				console.log('99999999', e.detail.value);
				if (e.detail.value.length !== 0) {
					this.checked = true

				} else {
					this.checked = false
				}
			},
			...mapActions([
				// 'getConfig', // 将`this.getConfig()` 映射为 `this.$store.dispatch('getConfig')`
				'getUserInfo'
			]),
			newEvent(item, index) {
				this.newId = item.id
				this.newAddress = item.address

			},
			async mealList() {
				const res = await mealList({
					lng: this.longitudess,
					lat: this.latitudess

				})

				this.bigArr = res.data
				this.bigArr.forEach((item) => {
					this.nameArr.push(item.name)
					this.idArr.push(item.id)
					this.apiSettingTopupEntityList.push(item.apiSettingTopupEntityList)
					item.apiSettingTopupEntityList.forEach((sitem) => {

						this.agentIdss = sitem.agentId

					})
				})


				this.apiSettingTopupEntityList.forEach((item) => {
					item.forEach((citem) => {
						this.apiSettingTopupEntityListArr.push(citem)

					})
				})
				this.agentId = this.apiSettingTopupEntityListArr[0].agentId
				console.log('44444444', this.agentId);
				// this.money = this.apiSettingTopupEntityListArr[0].inMoney
				this.mealId = this.apiSettingTopupEntityListArr[0].id

				this.newList = res.data
				this.range = this.apiSettingTopupEntityListArr
				let key = 'text'
				let value = 'value'
				this.range.forEach((item) => {
					// 防止添加的属性值为空
					if (item.id) {
						item[key] = item.inMoney + '元送' + item.outMoney
						item[value] = item.inMoney
					} else {
						item[key] = '-'
						item[value] = '0'
					}
				})
				this.ranges = this.range

			},
			moneyChange(e) {
				console.log('888888888', e);
				const index = this.list.findIndex(item => item.inMoney == this.money)
				if (index == -1) {
					this.mealId = -1
				} else {
					this.mealId = this.list[index].id
				}
			},
			// 选择优惠券
			chargeBond(e) {
				console.log('777777777', e, e.id);
				this.money = e.useCondition
				this.bondId = e.id
				this.bondMoney = e.useCondition
			},

			radioChange(e) {
				// console.log('2222', e);
			},
			radioGroupChange(e) {
				// console.log('5555', e);
			},
			signFn() {
				console.log('8888', this.buyValue);
				if (this.buyValue === '我已阅读并同意') {
					this.isRadio = true //勾选协议成功
					this.toast('你签署《充值协议》成功')
					setTimeout(() => {
						this.showPhone = false //关闭协议
						this.recharge()
					}, 1500)
				} else {
					this.toast('请勾选我已阅读并同意《充值协议》')
				}
			},
			async recharge() {
				// if (!this.isNewId) {
				// 	return this.toast('请选择你要充值的站点')
				// }

				// if (!this.checked) {
				// 	return this.toast('请勾选确认你要充值的站点与金额')
				// }
				if (!this.money) {
					return this.toast('充值金额不能为空')
				}
				if (Number(this.money) < Number(this.bondMoney)) {
					console.log('555', this.money, this.bondMoney);
					return this.toast(`无法使用，充值金额达到${this.bondMoney}元才能使用`)
				}
				const data = {
					money: this.money,
					agentId: this.agentId,
					userCouponId: this.bondId || ""
				}
				if (this.mealId > 0) {
					data.mealId = this.mealId
				}


				if (!this.isRadio) {
					const vqq = await protocol({
						type: 3,
						appType: 2
					})
					this.signContent = vqq.data || '充值协议内容待更新！'
					this.showPhone = true
					this.timer = setInterval(() => {
						if (this.counts === 0) {
							clearInterval(this.timer)
							this.isdisabled = false
							return this.timer = null
						}
						this.counts = this.counts - 1
					}, 1000)
					return false
				} else {
					this.showPhone = false
				}

				const res = await recharge(data)
				console.log('22221', res.data);
				this.wx_payment(res.data, result => {
					if (result == 1) {
						this.toast('支付成功', 500)
						setTimeout(async () => {
							await this.getUserInfo()
							// await this.routerLink({
							// 	path: '/pages/user/wallet/index'
							// })
							this.back()
						}, 500)
					} else if (result == 2) {
						this.toast('取消支付')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list_item {
		position: relative;
		// width: 300upx;
		height: 112upx;
		padding: 0 16upx;
		margin: 0 16upx 30upx;
		border-radius: 10upx;
		font-size: 32upx;
		font-family: PingFangSC;
		border: 2upx solid #999999;

		.item_icon_w {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 46upx;
			height: 42upx;
			padding: 10upx 0 0 20upx;

			.item_icon {
				position: relative;
				z-index: 2;
			}

			&::after {
				position: absolute;
				bottom: 0;
				left: 0;
				content: '';
				z-index: 0;
				width: 0;
				height: 0;
				border-right: 23upx solid transparent;
				border-top: 21upx solid transparent;
				border-left: 23upx solid transparent;
				border-bottom: 21upx solid transparent;
			}
		}

		&.item_active {
			color: $primary;
			border-color: $primary;

			.item_icon_w {
				&::after {
					border-right-color: $primary;
					border-bottom-color: $primary;
				}
			}
		}
	}

	.TabLan {
		// display: flex;
		// justify-content: flex-start;
		// align-items: center;
		display: inline-block;
		margin-right: 5%;
		margin-bottom: 5%;
		color: blue
	}

	.ss {
		display: block !important;
		width: 50%;
		color: #999999;
	}

	.TabLans {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		display: inline-block;
		margin-right: 5%;
		margin-bottom: 5%;
		color: blue
	}

	.cTabLan {
		margin-bottom: 10upx;
		margin-top: 10upx;
	}

	.active {
		color: red !important;
		padding: 5upx;
		border: 1upx solid #2979ff;
		// line-height: 25upx;
		text-align: center;
	}

	.apiSettingTopupEntityListArr {
		display: inline-block;
	}

	.flexul {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		border: 1upx solid #f5f5f5;
		background-color: #fff;
	}

	.flexli {
		border: 1upx solid #afafaf;
		padding: 5upx;
		margin: 10upx;
		width: 26%;
		text-align: center;
	}

	.AapiSettingTopupEntityListArr {
		border: 1upx solid #2979ff !important;
		color: red !important;
		// background-color: #2979ff;
	}


	/* 下拉列表的样式 */
	.nav-son {
		position: relative;
		/* 让下拉提示信息永远放于下拉内容的上面 */
		z-index: 99;
		border-top: 1upx solid #d1d3d4;
		border-bottom: 1upx solid #d1d3d4;
		background: #fff;
		display: flex;
		height: 40upx;
		align-items: center;
		font-size: 18upx;
	}

	/* 下拉列表 下三角的样式 */
	.nav-son image {
		position: absolute;
		right: 30upx;
		width: 50upx;
		height: 50upx;
	}

	/* 下拉框的样式 */
	.temp {
		/* 默认为不显示 */
		display: none;
		/* 下拉框的宽度， */
		width: 100%;
		/* 下拉框的最大高度 */
		max-height: 750upx;
		overflow-y: scroll;
		padding: 0 0 0 20upx;
		line-height: 100upx;
		background: #fff;
	}

	/* 下拉框内容的样式 */
	.temp view {
		border-bottom: 1upx solid #d1d3d4;
		font-size: 14upx;
		color: #666;
	}

	/* 下拉动画 */
	/* @keyframes Css3 新标签，循环动画 */
	@keyframes slidown {
		from {
			transform: translateY(-100%);
		}

		to {
			transform: translateY(0%);
		}
	}

	.slidown {
		display: block;
		animation: slidown .2s ease-in both;
	}

	/* 上拉动画 */
	@keyframes slidup {
		from {
			transform: translateY(0%);
		}

		to {
			transform: translateY(-100%);
		}
	}

	.slidup {
		display: block;
		animation: slidup .2s ease-in both;
		height: 0upx;
	}

	.text {
		font-size: 12upx;
		color: #666;
		margin-top: 5upx;
	}

	.uni-px-5 {
		padding-left: 10upx;
		padding-right: 10upx;
	}

	.uni-pb-5 {
		padding-bottom: 10upx;
	}

	.radio {
		color: #999;

	}

	label {
		color: #999;
	}

	checkbox {
		// margin-bottom: 20upx;
	}

	.chargeBond {
		font-size: 28upx;
		padding-bottom: 20upx;
	}
</style>